<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

	 <!-- 引入 echarts.js -->
    <script src="static/echarts.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        
        $.post('${path}/department?method=count',
        		function(jsonObj) {
        			// [{…}, {…}, {…}]
        			// {count: 3, name: "硬件部"}
        			console.log(jsonObj);
        			var xArray = new Array();
        			var yArray = new Array();
        			$(jsonObj).each(function() {
        				xArray.push(this.name);
        				yArray.push(this.count);
        			});
        			
        			var option = {
        		            title: {
        		                text: '部门员工数量统计'
        		            },
        		            tooltip: {},
        		            legend: {
        		                data:['数量']
        		            },
        		            xAxis: {
        		                data: xArray
        		            },
        		            yAxis: {},
        		            series: [{
        		                name: '数量',
        		                type: 'bar',
        		                data: yArray
        		            }]
        		        };
        			// 使用刚指定的配置项和数据显示图表。
        	        myChart.setOption(option);
       			},
       			'json');
    </script>
    
</body>
</html>